<template>
        <div class="main_container">
            <div class="banner-box">
                <img src="../assets/company.jpg" alt="" class="banner-img">
                <div class="container part1">
                    <div class="row">
                        <div class="aboutUs">
                            <div class="words">
                                　　河南喜柚网络科技有限公司是一家电商技术服务提供商，2014年成立于郑州，致力于向商业用户提供全面的电子商务技术服务。喜柚科技自成立开始重点发展自身科技能力，从电商前台到后台，直销到分销，PC到移动，线上到线下，帮助各类型企业打通资源、整合业务，提高电子商务水平。在2017年喜柚科技被认定为河南省科技型中小企业；同年8月喜柚科技经全国高新技术企业认定管理工作领导小组办公室审核，成为河南电商技术领域第一批高新技术企业，也为公司研发创新实力的提升再添一城。</div>
                            <div class="words">
                                　　喜柚科技是中国领先的零售电子商务软件提供商-商派（Shopex）的核心技术伙伴（Tech Partner）,同时也是全渠道SAAS软件提供商铱云科技（易订货）河南核心伙伴，拥有丰富的大型集团客户电商落地经验和中小企业批发零售解决方案。通过对电子商务深刻的理解，喜柚科技在16年-17年先后帮助三全食品（深交所：002216）、锦艺集团（港交所：00565）、雏鹰农牧集团（深交所：002477）等河南本土领先企业完成电子商务系统规划和实施。</div>
                            <div class="words">
                                　　喜柚科技是中国领先的第三方电子商务系统与解决方案提供商，我们提供完整的在线零售系统、分销管理系统和移动电商解决方案。凭借多年电子商务一线经验，形成了系统化、成熟的多种业务形态的电子商务方案，为所有电子商务企业客户提供从业务咨询到系统实施开发维护的服务，以客户业务成长为目标，需求为驱动，量身定制优化解决方案和应用程序方案。</div>
                            <div class="words">
                                　　喜柚拥有国内最成熟、使用最多的B2C商城建站系统，以移动互联网时代消费者体验为核心，充分满足企业会员互动、在线交易及业务成长的中高端电子商务平台。帮助中大型企业，通过稳定的架构、更高的拓展属性，提供专业、完整、可拓展的企业全渠道大数据销售系统。</div>
                            <div class="words last-words">
                                　　喜柚科技位于中原经济区的核心-郑东新区。将积累多年成熟、领先的电子商务经验引入，全面提高本土企业的电子商务能力以适应快速变化的移动互联网。我们倡导工程师文化，以产品和设计为导向，优化和改进客户业务流程，帮助本土企业提高电子商务能力。相信通过建立有效的系统结构、可控的风险体系、持续增值的模块化应用，将给我们的客户和生活带来更多有实际意义的价值。</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="time_box">
                <div class="time-con">
                    <div class="part-one">
                        <p class="honor">荣获"河南省电子商务企业"资质</p>
                        <p>2016 04</p>
                    </div>
                    <div class="part-two">
                        <p>2017 12</p>
                        <p class="honor">荣获"国家高新技术企业"资质</p>
                    </div>
                    <div class="part-three">
                        <p class="honor">荣获"河南省科技型中小企业"资质</p>
                        <p>2017 12</p>
                    </div>
                    <div class="part-four">
                        <p>2018 05</p>
                        <p class="honor">获得"郑州市电子商务示范企业"称号</p>
                    </div>
                    <div class="part-five">
                        <p class="honor">获得"郑州市科技雏鹰企业"称号</p>
                        <p>2018 11</p>
                    </div>
                    <span class="time-icon">&#xe601;</span>
                    <div class="line">
                        <div class="dott"></div>
                        <div class="dott dott2"></div>
                        <div class="dott dott3"></div>
                        <div class="dott dott4"></div>
                        <div class="dott dott5"></div>
                    </div>
                    <span class="time-icon">&#xe602;</span>
                    <div class="honor-img">
                        <img src="../assets/honor1.jpg" alt="">
                        <img src="../assets/honor2.jpg" alt="">
                    </div>
                </div>
            </div>
            <div class="service">
                <img src="../assets/culture.png" alt="">
                <div class="ser-word">
                    <p>
                        <span>公司愿景: 华中服务最优质的互联网企业</span>
                        <span>公司使命: 服务本土六十万企业用户</span>
                    </p>
                    <p>
                        <span>核心价值: 以服务成就客户</span>
                        <span class="ser-word-last">工作作风: 拼搏 担当 创新 真诚</span>
                    </p>
                </div>
            </div>
        </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        data () {
            return {
                lists:[ ],
                activeIndex: '1',
                isDisplay: false,
                articles:[ ]
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleScroll(){
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                if(scrollTop>70){
                    this.isDisplay=true;
                }else{
                    this.isDisplay=false;
                }
            }
        },
        mounted(){
            window.addEventListener('scroll',this.handleScroll);
            this.$router.afterEach((to, from, next) => {
                window.scrollTo(0, 0);
        });
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    @font-face {
        font-family: 'iconfont';  /* project id 962996 */
        src: url('https://at.alicdn.com/t/font_962996_gfog1hdl6s.eot');
        src: url('https://at.alicdn.com/t/font_962996_gfog1hdl6s.eot?#iefix') format('embedded-opentype'),
        url('https://at.alicdn.com/t/font_962996_gfog1hdl6s.woff2') format('woff2'),
        url('https://at.alicdn.com/t/font_962996_gfog1hdl6s.woff') format('woff'),
        url('https://at.alicdn.com/t/font_962996_gfog1hdl6s.ttf') format('truetype'),
        url('https://at.alicdn.com/t/font_962996_gfog1hdl6s.svg#iconfont') format('svg');
    }
    ul{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
    }
    P{
        margin-bottom: 0;
    }
    .main_container{
        width:100%;
        background-color: #eee;
    }
    .banner-box{
        width: 100%;
        margin:0 auto;
        position: relative;
    }
    .banner-img{
        width: 100%;
    }
   .part1{
       width: 1000px;
       background-color: #FFF;
       margin: 0 auto;
       margin-top: -130px;
       display: table;
   }
   .aboutUs{
       background-color: #fff;
   }
    .words{
        clear: both;
        font-size: 12px;
        color: #666;
        margin: 20px 50px;
        line-height: 30px;
        text-align: left;
    }
    .last-words{
        margin: 20px 50px 50px;
    }
    .time_box{
        padding-top: 50px;
        background-color: #eee;
        margin: 0 auto;
    }
    .time-con{
        width: 1000px;
        height: 600px;
        background-color: #fff;
        margin: 0 auto;
        padding: 0 30px;
        position: relative;
        overflow: hidden;
    }
    .part-one{
        position: absolute;
        top: 40px;
        left: 40px;
    }
    .part-three{
        position: absolute;
        top: 40px;
        left: 380px;
    }
    .part-five{
        position: absolute;
        top: 40px;
        left: 740px;
    }
    .part-two{
        position: absolute;
        top: 110px;
        left: 220px;
    }
    .part-four{
        position: absolute;
        top: 110px;
        left: 550px;
    }
    .honor{
        font-size: 16px;
        font-weight: 600;
    }
    .honor-img{
        margin-top: 200px;
    }
    .honor-img img{
        width: 50%;
        float: left;
    }
    .time-icon{
        font-family: 'iconfont';
        color: #ccc;
        float: left;
        margin-top: 90px;
    }
    .line{
        width: 900px;
        background-color: #ccc;
        height: 2px;
        float: left;
        margin-top: 100px;
        position: relative;
    }
    .dott{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #0149B7;
        position: absolute;
        top: -4px;
        left: 100px;
    }
    .dott2{
        left: 270px;
    }
    .dott3{
        left: 450px;
    }
    .dott4 {
        left: 630px;
    }
    .dott5 {
        left: 800px;
    }
    .service{
        width: 1000px;
        margin: 0 auto;
        background-color: #fff;
        margin-top: 30px;
        padding: 30px;
    }
    .ser-word{
        width: 630px;
        margin: 0 auto;
        margin-top: 20px;
    }
    .ser-word p{
        font-size: 14px;
        line-height: 30px;
        text-align: left;
        font-weight: 600;
    }
    .ser-word p span{
        margin-right: 20px;
    }
    .ser-word-last{
        margin-left: 85px;
    }


</style>
